// 首页渲染的js代码

// 1. 先显示加载层
let index = layer.load(0,{shade:[0.3,'#ccc']});

// 渲染首页函数
bindHtml()
async function bindHtml() {
  // 请求接口获取数据(北京的景点数据)
  let bjobj = await pAjax({url:'../server/scenics.php',data:{pid:2},dataType:'json'})
  // 结构获取数据
  let {data:bjarr} = bjobj
  // 遍历数组拼接html字符串并渲染
  let bgStr = bjarr.map(v=>{    
    // 获取商品的第一张图片地址
    // console.log( v )
    // console.log( v.imgpath.split('==========')[0] )
    return `
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="${v.imgpath.split('==========')[0]}" alt="...">
          <div class="caption">
              <h3>${v.name}</h3>
              <p class='introduce'>${v.introduce}</p>
              <p>
                  <a href="#" class="btn btn-default  index-detail" role="button" index=${v.id}>查看详情</a>
              </p>
          </div>
      </div>
    </div>  
  `;   
  }).join('');
  // 渲染到页面中
  $('.beijing').html(bgStr);

    // 请求接口获取数据(北京的景点数据)
    let anobj = await pAjax({url:'../server/scenics.php',data:{pid:13},dataType:'json'})
    // 结构获取数据
    let {data:anarr} = anobj
    // 遍历数组拼接html字符串并渲染
    let anStr = anarr.map(v=>`
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <img src="${v.imgpath.split('==========')[0]}" alt="...">
            <div class="caption">
                <h3>${v.name}</h3>
                <p class='introduce'>${v.introduce}</p>
                <p>
                    <a href="#" class="btn btn-default index-detail" role="button" index=${v.id}>查看详情</a>
                </p>
            </div>
        </div>
      </div>  
    `).join('');
    // 渲染到页面中
    $('.anhui').html(anStr);

    // 关闭加载层
    layer.close(index);

    

    // 使用事件委托进行查看详情的跳转
    $('#list').on('click','.index-detail',function () {
        // 获取商品的id
        let id = $(this).attr('index');
        // 将商品id存储到sessionStorage中  在跳转的页面中页面方法到商品的id
        console.log(666);
        sessionStorage.setItem('goodsId',id);
        // 跳转
        location.href = 'detail.html';
        return false;// 阻止默认跳转
      })

        // 使用事件委托进行查看详情的跳转
    $('#list2').on('click','.index-detail',function () {
        // 获取商品的id
        let id = $(this).attr('index');
        // 将商品id存储到sessionStorage中  在跳转的页面中页面方法到商品的id
        // console.log(666);
        sessionStorage.setItem('goodsId',id);
        // 跳转
        location.href = 'detail.html';
        return false;// 阻止默认跳转
      })
}


